<template>
	<section class="goods-header">
		<!-- #ifndef MP-TOUTIAO -->
		<singleHeader :pageTitle="$t('admin.goodDetail')"></singleHeader>
		<!-- #endif -->
		<template v-if="goodsInfo.product_type != 7">
			<view class="section-tab" v-show="!hideTopTab">
				<view class="tab-content" :style="[{ top: 'calc(' + statusBarHeight + 'px + 88rpx);' }]">
					<view class="tab-item" :class="activeTab == index ? 'active-tab' : ''"
						v-for="(item, index) in tabList" :key="index" @click="handleTopTab(item, index)">
						<view class="text">{{ item.text }}</view>
						<view class="active-line"></view>
					</view>
				</view>
				<!-- <view class="tab-hold-place"></view> -->
			</view>
		</template>
		<view class="goods-swiper" :style="[goodsSwiperCss]">
			<view class="fixStyle" v-if="newData && newData.nickname">
				<image style="width: 40rpx; height: 40rpx;border-radius: 50%;" :src="newData.avatar_url" mode="">
				</image>
				<view class="textStyle" style="margin-left: 5rpx;">
					{{newData.nickname}} {{timeDifference}}前下单了！
				</view>
			</view>
			<swiper class="swiper" :autoplay="false" :touchable="true" :height="375" @change="swiperChange">
				<swiper-item v-for="(item, index) in getPicList" :key="index">
					<video id="myVideo" class="goods-video" :src="item.pic_url" v-if="item.type && item.type == 'video'"
						@error="videoErrorCallback" controls></video>
					<image v-else :src="item.pic_url" alt="" mode="aspectFill" @click="previewPics(index)"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-length" v-if="getPicList.length">{{ swiperIndex + "/" + getPicList.length }}
			</view>

			<view class="rebate" v-if="goodsInfo.rebate && propsData.params.showFenxiao">
				<i class="iconfont icon-consumption-fill"></i>
				<view> 分销最高可赚 ¥{{ goodsInfo.rebate }} </view>
			</view>
			<view class="product-take_price" v-if="goodsInfo.goods_take_profit > 0">可使用联盟券: ¥{{ take_price }}</view>
			<view class="product-take_price" style="bottom: 90rpx" v-if="goodsInfo.goods_send_profit > 0">可获得联盟券: ¥{{ send_price }}</view>
		</view>
	</section>
</template>

<script>
	import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
	import {
		diySysPageMixin
	} from "@/components/diySystemPage/mixins/index.js";
	export default {
		name: "",
		props: {
			propsData: {
				type: Object,
				default: {},
			},
			goodsInfo: {
				type: Object,
				default: {},
			},
			hideTopTab: {
				type: Boolean,
				default: true,
			},
			topTabActiveIndex: {
				type: Number,
				default: 0,
			},
			newData: {
				type: Object,
				default: {},
			},
			timeDifference:{
				type:String,
				default:'',
			}
		},
		mixins: [],
		components: {
			singleHeader,
		},
		mixins: [diySysPageMixin], //混入文件
		data() {
			return {
				swiperIndex: 1,
				tabList: [{
						id: "0",
						text: this.$t("goods.goods"),
					},
					{
						id: "goodsEvaluate",
						text: this.$t("goods.evaluate"),
					},
					{
						id: "goodsRichText",
						text: this.$t("goods.detail"),
					},
				],
				activeTab: 0,
			};
		},
		mounted() {
		
		},
		
		watch: {
			topTabActiveIndex(val) {
				this.activeTab = val;
			}
		},

		computed: {
			getPicList() {
				let {
					goodsInfo
				} = this;

				if (goodsInfo && goodsInfo.pic_list && goodsInfo.pic_list.length) {
					// #ifdef APP-PLUS
					return goodsInfo.pic_list.filter((el) => el.type !== "video");
					// #endif

					// #ifndef APP-PLUS
					return goodsInfo.pic_list;
					// #endif
				}
				return [];
			},

			goodsSwiperCss() {
				if (!this.propsData) return {};
				let style = Object.assign({}, this.propsData.params);
				if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
				let obj = {
					margin: style.margin,
				};
				return obj;
			},
			send_price() {
				return (this.goodsInfo.price * this.goodsInfo.goods_send_profit).toFixed(2);
			},
			take_price() {
				return (this.goodsInfo.price * this.goodsInfo.goods_take_profit).toFixed(2);
			}
		},
		methods: {
			videoErrorCallback(e) {},
			handleTopTab(item, index) {
				this.stopTimer();
				this.activeTab = index;
				this.$emit("scrollToNode", item);
			},
			// 点击预览图片
			previewPics(e) {
				let pics = this.getPicList || [];
				let picArr = [];
				pics.forEach((item) => {
					picArr.push(item.pic_url);
				});
				uni.previewImage({
					current: e,
					urls: picArr,
					success() {
						uni.setStorageSync("usePreviewImgApi", "true");
					}
				});
			},
			swiperChange(e) {
				this.swiperIndex = Number(e.detail.current) + 1;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.textStyle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
		margin-left: 5rpx;
	}

	.fixStyle {
		position: absolute;
		padding: 5rpx 10rpx;
		top: 20rpx;
		left: 20rpx;
		height: 54rpx;
		background: #000000;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		opacity: 0.5;
		color: white;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.goods-header {
		width: 100%;

		.section-tab {
			width: 100%;

			.tab-content {
				width: 100%;
				height: 9.6vw;
				background: #ffffff;
				position: fixed;
				left: 0;
				z-index: 111;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.tab-item {
					flex: 1;
					height: 100%;
					padding-top: 10rpx;
					text-align: center;

					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #262626;
					}

					.active-line {
						width: 52rpx;
						height: 6rpx;
						background: #f0250e;
						margin: 4rpx auto 0;
						opacity: 0;
					}
				}

				.active-tab {
					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
					}

					.active-line {
						opacity: 1;
					}
				}
			}

			.tab-hold-place {
				width: 100%;
				height: 9.6vw;
			}
		}

		.goods-swiper {
			width: 100%;
			height: 750rpx;
			background-color: #fff;
			position: relative;

			swiper {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.goods-video {
				width: 100%;
				height: 100%;
			}

			.swiper-length {
				padding: 0.3vw 3.73vw;
				position: absolute;
				right: 3.2vw;
				bottom: 4.53vw;
				z-index: 22;
				background-color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #dddcdd;
				border-radius: 5vw;
			}
		}
	}

	.rebate {
		position: absolute;
		left: 24rpx;
		bottom: 24rpx;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		height: 52rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 32px;
		border: 2rpx solid #f2f2f2;
		font-size: 22rpx;
		color: #f0250e;

		.iconfont {
			position: relative;
			top: -1rpx;
			color: linear-gradient(180deg, #fe4638 0%, #fe6e2b 100%);
			font-size: 50rpx;
		}
	}
	.product-take_price {
		position: absolute;
		display: inline-block;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 0 20rpx 20rpx 0;
		padding: 3rpx 10rpx;
		color: #fff;
		font-size: 24rpx;
		bottom: 40rpx;
	}
</style>